<template>
  <dv-border-box-8 :color="['#00CCFF','#00CCFF']" class="center-cmp">
    <div style="width:100%;height: 100%;min-height: 200px; justify-content: center; position: relative" id="map"/>
    <div class="map-loading" v-if="mapLoading">
        <dv-loading>Loading...</dv-loading>
    </div>
    <div class="status">
        <div class="item">
            <div class="radius active"></div>
            <div class="font">运行({{stateStatics.active}})</div>
        </div>
        <div class="item">
            <div class="radius inactive"></div>
            <div class="font">停运({{stateStatics.inactive}})</div>
        </div>
        <div class="item">
            <div class="radius build"></div>
            <div class="font">在建({{stateStatics.build}})</div>
        </div>
    </div>
  </dv-border-box-8>
</template>

<script>
    import { Scene, PointLayer,Popup} from '@antv/l7';
    import { CountryLayer } from '@antv/l7-district';
    import { GaodeMap } from '@antv/l7-maps';
    import ProvinceData from './js/ProvinceData';
    import { mapGetters, mapState } from 'vuex';
    const colors = [ 'rgba(184,225,255,0.71)', 'rgba(125,170,255,0.7)', 'rgba(61,118,221,0.71)', 'rgba(0,71,165,0.71)', '#001D70'];
    export default {
        name: "CenterMap",
        computed: {
            ...mapState([
                'host'
            ])
        },
        props:{
          fact_display:{
            type:Object,
            require:true
          }
        },
        data(){
            return {
                mapLoading: true,
                currentEvObj:null,
                defaultZoom:6.4,
                finalMapZoom:3.5,
                defaultCenter:[103.3961,31.3471],
                stateStatics:{
                  active:0,
                  inactive:0,
                  build:0
                }
            }
        },
        created() {
          let self=this;
          window.detailAct=self.detailAct;
        },
      methods:{
          echartInit(){
            this.mapLoading = true;
            const powerStations = [{
              id:'123',
              name:'永强电厂',
              address:'龙湾度山村',
              longitude:120.81303,
              latitude:27.93252,
              status:'active',
              electricity_ability:'100',
              stat_img:'http://wmhb.wm-mis.com/yqfdc.jpg'
            }]
            this.convertMapOption(powerStations);
            this.mapLoading = false;
          },
          convertMapOption(stations){
            var self=this;
            let tColors=['rgba(0,224,211,0.2)'];
            let act_stations=[];
            let inact_stations=[];
            let build_stations=[];
            self.stateStatics.active=0;
            self.stateStatics.inactive=0;
            self.stateStatics.build=0;
            for (let station of stations){
              let stat_id=station.id;
              let stat_name=station.name;
              let stat_address=station.address;
              let stat_longit=station.longitude;
              let stat_latit=station.latitude;
              let stat_sts=station.status;
              let stat_electricity=station.electricity_ability;
              let stat_img=station.stat_img;
              if (stat_sts==='active'){
                self.stateStatics.active += 1;
                let colorVal=(Math.random()*30).toFixed(2);
                act_stations.push({id:stat_id,m:stat_name,address:stat_address,j:stat_longit,w:stat_latit,status:stat_sts,t:stat_electricity,avatar:stat_img});
              }else if (stat_sts==='inactive'){
                self.stateStatics.inactive += 1;
                inact_stations.push({id:stat_id,m:stat_name,address:stat_address,j:stat_longit,w:stat_latit,status:stat_sts,t:stat_electricity,avatar:stat_img});
              }else {
                self.stateStatics.build += 1;
                build_stations.push({id:stat_id,m:stat_name,address:stat_address,j:stat_longit,w:stat_latit,status:stat_sts,t:stat_electricity,avatar:stat_img});
              }
            }
            var scene = new Scene({
              id: 'map',
              logoVisible: false,
              map: new GaodeMap({
                pitch: 35.210526315789465,
                style: 'amap://styles/darkblue',
                center: this.defaultCenter,
                zoom: this.defaultZoom,
                token:'a271c4f70ee99aef380c68569053d232'
              })
            });
            scene.on('loaded', () => {
                new CountryLayer(scene, {
                    data: ProvinceData,
                    joinBy: [ 'NAME_CHN', 'name' ],
                    depth: 1,
                    zIndex: 1,
                    provinceStroke: '#fff',
                    cityStroke: '#EBCCB4',
                    cityStrokeWidth: 1,
                    fill: {
                      color: {
                        field: 'name',
                        values: tColors
                      }
                    },
                    autoFit: true,
                    label: {
                      enable: true
                    },
                    popup: {
                      enable: false
                    }
                });

                const pointLayer = new PointLayer({
                  zIndex: 2
                })
                .source(act_stations, {
                  parser: {
                    type: 'json',
                    x: 'j',
                    y: 'w'
                  }
                })
                .shape('cylinder')
                .size('t', function (level) {
                  return [2, 3, level];
                })
                .active(true)  //鼠标滑过高亮
                .color('#07c160')
                .style({
                  opacity: 1.0
                });

                const inactLayer = new PointLayer({zIndex: 2})
                .source(inact_stations, {
                  parser: {
                    type: 'json',
                    x: 'j',
                    y: 'w'
                  }
                })
                .shape('cylinder')
                .size('t', function (level) {
                  return [2, 3, level];
                })
                .active(true)
                .color('red')
                .style({
                  opacity: 1.0
                });

                const buildLayer = new PointLayer({zIndex: 2})
                .source(build_stations, {
                  parser: {
                    type: 'json',
                    x: 'j',
                    y: 'w'
                  }
                })
                .shape('cylinder')
                .size('t', function (level) {
                  return [2,3, level];
                })
                .active(true)
                .color('yellow')
                .style({
                  opacity: 1.0
                });

                const popup = new Popup();
                scene.addPopup(popup);
                self.layerEvent(scene,popup,pointLayer);
                self.layerEvent(scene,popup,inactLayer);
                self.layerEvent(scene,popup,buildLayer);
                scene.addLayer(pointLayer);
                scene.addLayer(inactLayer);
                scene.addLayer(buildLayer);
                setTimeout(()=>{
                    scene.setZoomAndCenter(this.finalMapZoom, this.defaultCenter);
                }, 1000);
            });
            setTimeout(()=>{
                self.mapLoading = false;
            }, 1500);
          },
          layerEvent(scene, popv, layer) {
            let self=this;
            layer.on('mousemove', function (ev) {
              popv.close();
              let lnglat = [ev.feature.j, ev.feature.w];
              popv.setLnglat(lnglat).setHTML(self.popHtml(ev));
              popv.open();
              self.currentEvObj=ev;
            });
            layer.on('mouseout', function () {
              popv.close();
              self.currentEvObj=null;
            });

            layer.on('click', function (ev) {
              popv.close();
              let lnglat = [ev.feature.j, ev.feature.w];
              popv.setLnglat(lnglat).setHTML(self.popHtml(ev));
              popv.open();
              self.currentEvObj=ev;
            });
          },
          popHtml(ev) {
            let fac_stat = this.factoryConvertStatus(ev.feature.status);
            let imgUrl=ev.feature.avatar;
            var html = '<div style="color: rgb(0,0,0);padding: 5px;display: flex">' +
              '<img style="width: 80px;height: 80px;border: gray solid 1px;margin-top: 5px"  src='+ imgUrl +' />' +
              '<div style="padding: 5px;margin-left: 5px;min-width: 120px;font-size: small">' +
              '<span style="font-weight: bold">名称:</span>' + ev.feature.m + '<br>' +
              '<span style="font-weight: bold">地址:</span>' + ev.feature.address + '<br>' +
              '<span style="font-weight: bold">运行状态:</span>' + fac_stat + '<br>' +
              '<br>' +
              '<button style="width: 50%;background-color: #2b85e4;color: white;border: 0;cursor: pointer" onclick="detailAct()">详情>></button>' +
              '</div>' +
              '</div>';
            return html;
          },
          showStationDetail(ev){
            let data=ev.feature;
            let stat_id=data.id;
            let stat_name=data.m;
            let stat_stus=data.status;
            const stat_data={
              id:data.id,
              name:data.m,
              status:data.status
            }
            this.$emit("map-tap", stat_data);
            // self.ajax({
            //   url: this.$request.bigScreen.bigDataDetail.replace('{id}',stat_id),
            //   params: {},
            //   success: function (data) {
            //     let fac_data=JSON.parse(JSON.stringify(data));
            //     fac_data.name=stat_name;
            //     fac_data.id=stat_id;
            //     fac_data.status=stat_stus;
            //
            //   },
            //   fail() {}
            // });
          },
          detailAct(){
            this.showStationDetail(this.currentEvObj);
          },
          factoryConvertStatus(stat){
            let c_stat="运行中";
            if (stat==='inactive'){
              c_stat="停运";
            }else if (stat==='build'){
              c_stat="在建";
            }
            return c_stat;
          }
      },
      mounted() {
        this.echartInit();
      }
    }
</script>

<style lang="scss" scoped>
    .center-cmp {
      width: 100%;
      padding: 20px;
      height: 65%;
      display: flex;
      align-items: center;
      justify-items: center;
      .border-box-content{
          padding: 5px;
      }
    }
    .map-loading{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    #map{
        background: #242a38;
    }
    .mapCls{
      width: 70%;
      height: 90%;
    }
    .status{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        z-index: 900;
        & .item{
            margin: 10px;
            color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            & .font{
                font-size: 12px;
                margin-left: 5px;
            }
            & .radius{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: white;
            }
            & .active{
                background: #07c160;
            }
            & .inactive{
                background: red;
            }
            & .build{
                background: yellow;
            }
        }
    }
</style>
